import React, { FC } from 'react';
import { IResource } from '@/components';
import { ResourceCard } from '@/components';
import './index.less';

interface TopicProps {
  title: string;
  data: IResource[];
}

export const Topic: FC<TopicProps> = ({ title, data }) => {
  return (
    <div className='topic'>
      <h3>———————— { title } ————————</h3>
      <div className='topic-data'>
        {
          data.map(resource =>
            <ResourceCard
              key={ resource.id }
              className="topic-resource"
              { ...resource }
            />
          )
        }
      </div>
    </div>
  );
};
